<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    ul {}

    .item li {
      list-style: none;
      width: 590px;
      height: 340px;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 300ms ease-in-out 0s;
    }

    img {
      width: 100%;
      height: 100%;
    }

    .leftBtn {
      position: absolute;
      left: 0;
      top: 0;
    }

    .rightBtn {
      position: absolute;
      right: 0;
      top: 0;
    }

    div {
      position: relative;
      width: 590px;
      height: 340px;
    }

    .page {
      position: absolute;
      bottom: 50px;
      left: 200px;
      height: 30px;
      /*width: 300px;*/
    }

    .page li {
      float: left;
      width: 30px;
      height: 30px;
      list-style: none;
      background: red;
      border-radius: 50%;
      line-height: 30px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="item">
      <li style="opacity: 1"><img src="images/1.jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/3.jpg" /></li>
      <li><img src="images/4.jpg" /></li>
      <li><img src="images/5.jpg" /></li>
    </ul>
    <button class="leftBtn">&lt;</button>
    <button class="rightBtn">&gt;</button>

    <ul class="page">
      <li style="background-color: white">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>

  <script>
    /*
           思路：
              选型卡 
              1-记录当前的 页码 index
              2-  
                给下面的小点  加点击事件（移入）    
                  让当前的图片显示 隐藏  ，当前显示小点 变红
                  小点的下标对应的 图片 显示  对应的小点 变白   
                index = i

              3-左右按钮  
                 右按钮 点击事件      让当前的图片显示 隐藏  ，当前显示小点 变红  
                  index++  
                  小点的下标对应的 图片 显示  对应的小点 变白 
              4- 自动播放  
                 定时器  调用 rightBtn.onclick（）  
                 移入 移出      
      */

    // 记录 正在显示的选项或者页码 从0开始
    var pageIndex = 0;

    // 2- 给小圆点点击移入事件
    let pageLiArr = document.querySelectorAll('.page li');
    let itemLiArr = document.querySelectorAll('.item li')
    pageLiArr.forEach((li, index) => {
      li.onmouseenter = () => {
        console.log(li, index);
        // 先让 当前的页码 对应的 小点 变红
        // 再让 移入小点 变白
        pageLiArr[pageIndex].style.background = 'red';
        // pageLiArr.forEach(v => v.style.background = 'red')

        // 先让 当前的页码 对应的  上的li op 成为 0 
        itemLiArr[pageIndex].style.opacity = 0

        li.style.background = 'white'

        // 再让 移入的小点 对应的 itemLi  op 成为1
        itemLiArr[index].style.opacity = 1



        //改变 paegIndex值--记录最新选中状态
        pageIndex = index;


      }
    })

    // 3-翻页 

    // 下一页
    let rightBtn = document.querySelector(".rightBtn")
    let leftBtn = document.querySelector(".leftBtn")

    let nextPageFn = () => {
      // 先让当前页面隐藏-先让当前的页面 变红
      itemLiArr[pageIndex].style.opacity = 0;
      pageLiArr[pageIndex].style.background = 'red';

      // 计算下一页的页码
      let nextPageIndex = pageIndex + 1;

      console.log(nextPageIndex);
      console.log(itemLiArr);
      if (nextPageIndex == 5) {
        //说明已经是 最后一页了，下页应该是0 
        nextPageIndex = 0
      }
      // 再让下一页的出现 ，下一个小点 变白
      itemLiArr[nextPageIndex].style.opacity = 1;
      pageLiArr[nextPageIndex].style.background = 'white';

      // 改变 pageInde的 
      pageIndex = nextPageIndex


    }

    rightBtn.onclick = nextPageFn

    leftBtn.onclick = () => {
      // 先让当前页面隐藏-先让当前的页面 变红
      itemLiArr[pageIndex].style.opacity = 0;
      pageLiArr[pageIndex].style.background = 'red';

      // 计算上一页的页码
      let prevPageIndex = pageIndex - 1;
      if (prevPageIndex == -1) {
        //说明已经是 第一页了，下页应该是4
        prevPageIndex = 4
      }
      // 再让下一页的出现 ，下一个小点 变白
      itemLiArr[prevPageIndex].style.opacity = 1;
      pageLiArr[prevPageIndex].style.background = 'white';

      // 改变 pageInde的 
      pageIndex = prevPageIndex


    }


    // 自动播放---定时器  每隔2秒 自动点击 右按钮一次

    let timer = setInterval(() => {
      // rightBtn.onclick()
      nextPageFn()

      // // 创建事件对象
      // let evt = new Event('click');
      // // 让事件对象 在right上触发 
      // rightBtn.dispatchEvent(evt)


    }, 2000);

    let box = document.querySelector('.box');
    // 移入 清除定时器
    box.onmouseenter = function () {
      console.log('onmouseenter');
      // 清除是全局的变量 timer
      clearInterval(timer)
    }
    // 移出--重启定时器
    box.onmouseleave = function () {
      console.log('onmouseleave');
      // 重启定时 把 返回值直接存入全局变量，
      timer = setInterval(() => {
        // rightBtn.onclick()
        nextPageFn()

        // // 创建事件对象
        // let evt = new Event('click');
        // // 让事件对象 在right上触发 
        // rightBtn.dispatchEvent(evt)

      }, 2000);
    }




  </script>
</body>

</html>